<!-- 巡护管理 -->
<script setup>
import { toRefs, ref, watch, reactive } from 'vue';
import { exportExcel } from '@/common/common-helper';
import mitt from '@/common/common-helper';
import { CLEAR_POPUP_MAP, GET_MAPBOX_MAP, REMOVE_LAYER, REMOVE_MAP_IMG } from '../common/common-map-fun';
import MapOnlinePatrol from './MapOnlinePatrol.vue';
import MapPatrolRecords from './MapPatrolRecords.vue';
import MapPatrolRecordsDetail from './MapPatrolRecordsDetail.vue';
import MapPatrolRules from './MapPatrolRules.vue';

const props = defineProps({
  useChecked: String,
  windowShow: Boolean,
});
const { useChecked, windowShow } = toRefs(props);
const emit = defineEmits(['handleCloseOpen']);

const btnChecked = ref('在线巡护');
const widthValue = ref('35.9375rem');
const showModalRules = ref(false);
const tableList = ref([]);
const lookState = ref(false);
const lookItemDetail = ref({});
const patrolInfoObj = reactive({
  baseInfo: {},
  userStatistics: {},
  trajectoryList: {},
  checkWork: [],
  patrolRule: null,
  detailShow: false,
});

/**
 *@description: 获取通讯信息
 */
mitt.on('handleItemGJAll', (val) => {
  if (val) {
    patrolInfoObj.detailShow = false;
    lookState.value = false;
  }
});

mitt.on('handleItemClose', (val) => {
  if (val) {
    patrolInfoObj.detailShow = false;
  }
});

watch(
  useChecked,
  () => {
    btnChecked.value = '在线巡护';
  },
  { deep: true },
);

// 获取窗口宽度
const handleWindowWidth = (item) => {
  widthValue.value = item;
};

const handleCheckedBtnRecord = (item) => {
  widthValue.value = '35.9375rem';
  btnChecked.value = item;

  patrolInfoObj.detailShow = false;

  CLEAR_MAP_LAYER();

  if (item == '巡护记录') {
    //! 获取规则接口
  }
};

const handleCloseOpen = () => {
  emit('handleCloseOpen');
};

const handleShowModalRules = () => {
  showModalRules.value = false;
  //! 获取规则接口
};

// 导出
const handleDownload = () => {
  recordPageListApi();
};

/*
 *@description: 分页查询巡护记录
 */
const recordPageListApi = async () => {
  const data = [
    {
      id: 219,
      createdDate: '2024-01-05 17:01:14',
      createdBy: '56182170913492992',
      badgeNumber: null,
      startDate: '2024-01-05 16:58:36',
      endDate: '2024-01-05 17:01:13',
      trackLen: 559,
      patrolDuration: 157,
      track: null,
      gpx: {
        filename: '巡护轨迹_20240105165833.gpx',
        object: '56182170913492992/track/7928be9a70104ba6b54b311ae26e2f46.gpx',
        length: 4410,
      },
      upToStandard: true,
      creatorAccount: '18740305372',
      creatorAvatar: '56182170913492992/202309/7892f997fcb740d2825bb26bf972b17a.jpg',
      creatorName: '杨一',
      deptNames: ['林业站'],
    },
    {
      id: 218,
      createdDate: '2024-01-05 16:58:21',
      createdBy: '56182170913492992',
      badgeNumber: null,
      startDate: '2023-12-26 16:40:44',
      endDate: '2024-01-05 16:58:21',
      trackLen: 602,
      patrolDuration: 865056,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231226164041.gpx',
        object: '56182170913492992/track/05c3293a26d94b8f86838520ddacce8d.gpx',
        length: 4765,
      },
      upToStandard: true,
      creatorAccount: '18740305372',
      creatorAvatar: '56182170913492992/202309/7892f997fcb740d2825bb26bf972b17a.jpg',
      creatorName: '杨一',
      deptNames: ['林业站'],
    },
    {
      id: 217,
      createdDate: '2023-12-26 16:39:49',
      createdBy: '56182170913492992',
      badgeNumber: null,
      startDate: '2023-12-26 16:34:04',
      endDate: '2023-12-26 16:39:45',
      trackLen: 1836,
      patrolDuration: 341,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231226163401.gpx',
        object: '56182170913492992/track/a776a1c51a044caeac0f4b6cadd0ec92.gpx',
        length: 7583,
      },
      upToStandard: true,
      creatorAccount: '18740305372',
      creatorAvatar: '56182170913492992/202309/7892f997fcb740d2825bb26bf972b17a.jpg',
      creatorName: '杨一',
      deptNames: ['林业站'],
    },
    {
      id: 216,
      createdDate: '2023-12-26 16:32:56',
      createdBy: '56182170913492992',
      badgeNumber: null,
      startDate: '2023-12-26 16:31:34',
      endDate: '2023-12-26 16:32:54',
      trackLen: 279,
      patrolDuration: 79,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231226163134.gpx',
        object: '56182170913492992/track/3d3e0b50d4c440ccbcd8e37b4ca63d3b.gpx',
        length: 2545,
      },
      upToStandard: true,
      creatorAccount: '18740305372',
      creatorAvatar: '56182170913492992/202309/7892f997fcb740d2825bb26bf972b17a.jpg',
      creatorName: '杨一',
      deptNames: ['林业站'],
    },
    {
      id: 215,
      createdDate: '2023-12-26 16:31:29',
      createdBy: '56182170913492992',
      badgeNumber: null,
      startDate: '2023-12-26 16:30:06',
      endDate: '2023-12-26 16:31:25',
      trackLen: 334,
      patrolDuration: 79,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231226163003.gpx',
        object: '56182170913492992/track/6f60ae584a434161a2ae98f09ee7bd60.gpx',
        length: 2541,
      },
      upToStandard: true,
      creatorAccount: '18740305372',
      creatorAvatar: '56182170913492992/202309/7892f997fcb740d2825bb26bf972b17a.jpg',
      creatorName: '杨一',
      deptNames: ['林业站'],
    },
    {
      id: 214,
      createdDate: '2023-12-26 16:29:10',
      createdBy: '56182170913492992',
      badgeNumber: null,
      startDate: '2023-12-26 16:28:14',
      endDate: '2023-12-26 16:29:09',
      trackLen: 71,
      patrolDuration: 55,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231226162813.gpx',
        object: '56182170913492992/track/0e299da42d3c4371b35ad469ef43ad3b.gpx',
        length: 1257,
      },
      upToStandard: false,
      creatorAccount: '18740305372',
      creatorAvatar: '56182170913492992/202309/7892f997fcb740d2825bb26bf972b17a.jpg',
      creatorName: '杨一',
      deptNames: ['林业站'],
    },
    {
      id: 213,
      createdDate: '2023-12-11 16:07:27',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-12-11 16:07:14',
      endDate: '2023-12-11 16:07:23',
      trackLen: 34,
      patrolDuration: 9,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231211160713.gpx',
        object: '53577011515535360/track/c4ecfb5938cd4e3b942cebba749934db.gpx',
        length: 904,
      },
      upToStandard: false,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 212,
      createdDate: '2023-12-05 15:35:06',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-12-05 15:28:52',
      endDate: '2023-12-05 15:34:58',
      trackLen: 1275,
      patrolDuration: 365,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231205152852.gpx',
        object: '53577011515535360/track/237e1ee9ab484213a373f1388c57d504.gpx',
        length: 9215,
      },
      upToStandard: true,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 211,
      createdDate: '2023-12-05 11:16:55',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-12-05 11:16:05',
      endDate: '2023-12-05 11:16:55',
      trackLen: 174,
      patrolDuration: 49,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231205111600.gpx',
        object: '53577011515535360/track/756ecc39aaa8421f8ccb45e12d65864a.gpx',
        length: 1842,
      },
      upToStandard: false,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 210,
      createdDate: '2023-11-30 10:24:57',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-11-30 10:23:02',
      endDate: '2023-11-30 10:24:43',
      trackLen: 366,
      patrolDuration: 101,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231130102258.gpx',
        object: '53577011515535360/track/1686c29020d4454e990a4b207825c8e4.gpx',
        length: 3129,
      },
      upToStandard: true,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 209,
      createdDate: '2023-11-27 09:48:22',
      createdBy: '52952154230702080',
      badgeNumber: null,
      startDate: '2023-11-27 09:48:17',
      endDate: '2023-11-27 09:48:19',
      trackLen: 17,
      patrolDuration: 1,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231127094814.gpx',
        object: '52952154230702080/track/7825586719924054b34480f3e27dda39.gpx',
        length: 785,
      },
      upToStandard: false,
      creatorAccount: '15877480107',
      creatorAvatar: '52952154230702080/202311/dd52bf3c04a744efb87e7d4baa01513b.jpg',
      creatorName: '菲F',
      deptNames: ['图灵普惠', '积木科技', '林业站', '东海道子管护站', '北家海子管护站', '三滩水管护站'],
    },
    {
      id: 208,
      createdDate: '2023-11-24 11:08:28',
      createdBy: '52952154230702080',
      badgeNumber: null,
      startDate: '2023-11-24 11:08:20',
      endDate: '2023-11-24 11:08:25',
      trackLen: 17,
      patrolDuration: 4,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231124110820.gpx',
        object: '52952154230702080/track/cfcce11528f64d0aa9f0d45bfec18609.gpx',
        length: 786,
      },
      upToStandard: true,
      creatorAccount: '15877480107',
      creatorAvatar: '52952154230702080/202311/dd52bf3c04a744efb87e7d4baa01513b.jpg',
      creatorName: '菲F',
      deptNames: ['图灵普惠', '积木科技', '林业站', '东海道子管护站', '北家海子管护站', '三滩水管护站'],
    },
    {
      id: 207,
      createdDate: '2023-11-24 11:08:17',
      createdBy: '52952154230702080',
      badgeNumber: null,
      startDate: '2023-11-24 10:37:15',
      endDate: '2023-11-24 11:08:17',
      trackLen: 57,
      patrolDuration: 1861,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231124103715.gpx',
        object: '52952154230702080/track/f92756fc26df481387d2cd1bac0fc8a9.gpx',
        length: 1837,
      },
      upToStandard: true,
      creatorAccount: '15877480107',
      creatorAvatar: '52952154230702080/202311/dd52bf3c04a744efb87e7d4baa01513b.jpg',
      creatorName: '菲F',
      deptNames: ['图灵普惠', '积木科技', '林业站', '东海道子管护站', '北家海子管护站', '三滩水管护站'],
    },
    {
      id: 206,
      createdDate: '2023-11-24 10:31:25',
      createdBy: '52952154230702080',
      badgeNumber: null,
      startDate: '2023-11-24 10:31:18',
      endDate: '2023-11-24 10:31:20',
      trackLen: 17,
      patrolDuration: 1,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231124103115.gpx',
        object: '52952154230702080/track/c25040a43b554670b81495e88ffd5e2d.gpx',
        length: 785,
      },
      upToStandard: false,
      creatorAccount: '15877480107',
      creatorAvatar: '52952154230702080/202311/dd52bf3c04a744efb87e7d4baa01513b.jpg',
      creatorName: '菲F',
      deptNames: ['图灵普惠', '积木科技', '林业站', '东海道子管护站', '北家海子管护站', '三滩水管护站'],
    },
    {
      id: 205,
      createdDate: '2023-11-24 10:24:16',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-11-24 10:22:26',
      endDate: '2023-11-24 10:23:48',
      trackLen: 296,
      patrolDuration: 81,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231124102222.gpx',
        object: '53577011515535360/track/6731e3f705b943fc92ebda0b53048a31.gpx',
        length: 2658,
      },
      upToStandard: true,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 204,
      createdDate: '2023-11-24 10:21:07',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-11-24 10:19:36',
      endDate: '2023-11-24 10:20:48',
      trackLen: 262,
      patrolDuration: 72,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231124101933.gpx',
        object: '53577011515535360/track/6005c069c0ee4f0881f70f1f7b2bf099.gpx',
        length: 2423,
      },
      upToStandard: true,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 203,
      createdDate: '2023-11-24 10:18:53',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-11-24 10:16:41',
      endDate: '2023-11-24 10:18:46',
      trackLen: 436,
      patrolDuration: 124,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231124101641.gpx',
        object: '53577011515535360/track/b31cc589c1304264b8806cb64ad6a5a6.gpx',
        length: 3596,
      },
      upToStandard: true,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 202,
      createdDate: '2023-11-24 10:16:41',
      createdBy: '53577011515535360',
      badgeNumber: null,
      startDate: '2023-11-24 10:14:09',
      endDate: '2023-11-24 10:16:39',
      trackLen: 524,
      patrolDuration: 150,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231124101408.gpx',
        object: '53577011515535360/track/8796524dead54609a2530c841f8dba1c.gpx',
        length: 4183,
      },
      upToStandard: true,
      creatorAccount: '13072961009',
      creatorAvatar: '53577011515535360/202312/c26e9b89619149939132d86416b92dfc.jpg',
      creatorName: '杨哲勿删',
      deptNames: ['图灵普惠'],
    },
    {
      id: 201,
      createdDate: '2023-11-23 10:23:25',
      createdBy: '84851735847473152',
      badgeNumber: null,
      startDate: '2023-11-23 10:22:49',
      endDate: '2023-11-23 10:23:10',
      trackLen: 87,
      patrolDuration: 21,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231123102245.gpx',
        object: '84851735847473152/track/df5d0d89e7f94cf6849c02783d109bbc.gpx',
        length: 1255,
      },
      upToStandard: true,
      creatorAccount: '13072961004',
      creatorAvatar: '84851735847473152/202311/4d03c57fd7894cb68e6c8f5bfa60b2fb.jpg',
      creatorName: '测试e',
      deptNames: ['图灵普惠'],
    },
    {
      id: 200,
      createdDate: '2023-11-23 10:15:12',
      createdBy: '84851735847473152',
      badgeNumber: null,
      startDate: '2023-11-23 09:00:42',
      endDate: '2023-11-23 09:05:24',
      trackLen: 995,
      patrolDuration: 281,
      track: null,
      gpx: {
        filename: '巡护轨迹_20231123090039.gpx',
        object: '84851735847473152/track/bfa26b69cad24c889776671ed2fc0d92.gpx',
        length: 7343,
      },
      upToStandard: true,
      creatorAccount: '13072961004',
      creatorAvatar: '84851735847473152/202311/4d03c57fd7894cb68e6c8f5bfa60b2fb.jpg',
      creatorName: '测试e',
      deptNames: ['图灵普惠'],
    },
  ];

  data.map((item) => {
    item.upToStandard = item.upToStandard ? '是' : '否';
    item.patrolDuration = (item.patrolDuration * 0.000278).toFixed(4);
    item.trackLen = (item.trackLen * 0.001).toFixed(2);
    item.startDate = `${item.startDate}-${item.endDate.split(' ')[1]}`;
    item.deptNames = item.deptNames.join('、');
  });

  tableList.value = data;

  const columns = [
    {
      title: '巡护人员',
      dataIndex: 'creatorName',
    },
    {
      title: '管护站',
      dataIndex: 'deptNames',
    },
    {
      title: '起止时间',
      dataIndex: 'startDate',
    },
    {
      title: '里程(km)',
      dataIndex: 'trackLen',
    },
    {
      title: '巡护时长(h)',
      dataIndex: 'patrolDuration',
    },

    {
      title: '联系方式',
      dataIndex: 'creatorAccount',
    },

    {
      title: '是否达标',
      dataIndex: 'upToStandard',
    },
  ];

  exportExcel(columns, [], tableList.value, '巡护记录');
};

// 巡护记录查看
const handleRecordLookItem = (item, state) => {
  lookState.value = state;

  patrolInfoObj.detailShow = false;
  lookItemDetail.value = item;

  patrolInfoObj.detailShow = true;
};

const handleCloseDetailShow = () => {
  lookState.value = false;
  patrolInfoObj.detailShow = false;
  lookItemDetail.value = {};
};

const GetRuleInfo = () => {
  //! 获取规则接口
};

// 清除图层数据
const CLEAR_MAP_LAYER = () => {
  const map = GET_MAPBOX_MAP();

  REMOVE_MAP_IMG('point-dot');
  CLEAR_POPUP_MAP();

  map?.getStyle()?.layers?.map((item) => {
    if (
      ['MAP_POINT_LAYER', 'MAP_POINT_LAYER_LIGHT', 'MAP_LINE_LAYER', 'MEASURE_POINT', 'MEASURE_POINT_C'].includes(
        item?.metadata?.group,
      ) &&
      ['source'] in item
    ) {
      REMOVE_LAYER(item.id);
      REMOVE_MAP_IMG(item.id);
    }
  });

  map.setZoom(8);
};
</script>
<template>
  <div v-if="windowShow && ['巡护管理'].includes(useChecked)" class="record_root" :style="{ width: widthValue }">
    <div class="window_content">
      <header>
        <div class="btn_list">
          <div
            class="btn_item"
            :style="{ fontWeight: btnChecked == '在线巡护' ? '600' : '' }"
            @click="handleCheckedBtnRecord('在线巡护')"
          >
            <p>在线巡护</p>
            <hr :style="{ display: btnChecked == '在线巡护' ? 'block' : 'none' }" />
          </div>
          <div
            class="btn_item"
            :style="{ fontWeight: btnChecked == '巡护记录' ? '600' : '' }"
            @click="handleCheckedBtnRecord('巡护记录')"
          >
            <p>巡护记录</p>
            <hr :style="{ display: btnChecked == '巡护记录' ? 'block' : 'none' }" />
          </div>
          <p v-if="btnChecked == '巡护记录'" class="p_dc" @click="handleDownload()">导出</p>

          <p
            @click="
              () => {
                showModalRules = true;
              }
            "
          >
            巡护规则
          </p>
        </div>
        <p class="close_btn" @click="handleCloseOpen">X</p>
      </header>
      <main>
        <!-- 在线巡护 -->
        <MapOnlinePatrol
          v-if="btnChecked == '在线巡护'"
          :btn-checked="btnChecked"
          @handle-window-width="handleWindowWidth"
        />

        <!-- 巡护记录 -->
        <MapPatrolRecords
          v-if="btnChecked == '巡护记录'"
          :btn-checked="btnChecked"
          :look-state="lookState"
          @handle-record-look-item="handleRecordLookItem"
        />
      </main>
    </div>
  </div>

  <!-- 巡护规则 -->
  <MapPatrolRules
    :show-modal-rules="showModalRules"
    :patrol-rule="patrolInfoObj.patrolRule"
    @handle-show-modal-rules="handleShowModalRules"
    @get-rule-info="GetRuleInfo"
  />

  <!-- 查看巡护记录 -->

  <MapPatrolRecordsDetail
    :detail-show="patrolInfoObj.detailShow"
    :look-item-detail="lookItemDetail"
    :patrol-info-obj="patrolInfoObj"
    @handle-close-detail-show="handleCloseDetailShow"
  />
</template>

<style scoped lang="scss">
.record_root {
  position: absolute;
  top: 20px;
  left: 120px;
  z-index: 3;
  box-sizing: border-box;
  min-height: 420px;
  padding: 19px 21px 28px 18px;
  color: #ffffff;
  background: rgba(24, 33, 47, 0.56);
  border-radius: 6px;

  .window_content {
    position: relative;
    width: 100%;
    height: 100%;
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 16px;
      font-size: 18px;
      letter-spacing: 2px;
      border-bottom: 1px solid rgba(246, 247, 246, 0.1);
      .btn_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .btn_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          p {
            margin-top: 14px;
            margin-bottom: 8px;
            &:hover {
              font-weight: 600;
            }
          }
          hr {
            width: 29px !important;
            border: 2px solid #8db6fb !important ;
          }
        }
        p {
          color: #ffffff;
          font-size: 18px;
          cursor: pointer;
        }

        .p_dc {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 34px;
          background-color: rgba(253, 253, 254, 0.2);
          border: 1px solid #ffffff;
          border-radius: 4px;
        }

        p:last-child {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 34px;
          color: #9fc2ff !important;
          font-weight: 500;
          font-size: 16px !important;
          font-family: Source Han Sans CN;
          background-color: rgba(163, 195, 246, 0.2);
          border: 1px solid #9fc2ff;
          border-radius: 4px;
        }
      }
      .close_btn {
        margin-left: 24px;
        cursor: pointer;
      }
    }

    main {
      height: 100%;
    }
  }
}
</style>
